<template>
  <div class="column">
    <div class="title">{{ $t('settings.shortcuts.title') }}</div>
    <div class="column toggles q-my-md" style="width: 280px">
      <div class="row items-center home-group">
        <q-icon name="home" size="20px" class="q-mr-md" />
        <div>{{ $t('home.title') }}</div>
        <q-space />
        <q-toggle color="accent" v-model="showHome" disable />
      </div>
      <div class="row items-center connections-group">
        <q-icon name="people" size="20px" class="q-mr-md" />
        <div>{{ $t('connections.title') }}</div>
        <q-space />
        <q-toggle color="accent" v-model="showMyConnections" />
      </div>
      <div class="row items-center content-group">
        <q-icon name="mdi-play-box" size="20px" class="q-mr-md" />
        <div>{{ $t('contents.title') }}</div>
        <q-space />
        <q-toggle color="accent" v-model="showMyContent" />
      </div>
      <div class="row items-center library-group">
        <q-icon name="layers" size="20px" class="q-mr-md" />
        <div>{{ $t('library.title') }}</div>
        <q-space />
        <q-toggle color="accent" v-model="showMyLibrary" />
      </div>
      <div class="row items-center analytics-group">
        <q-icon name="mdi-chart-box" size="20px" class="q-mr-md" />
        <div>{{ $t('analytics.title') }}</div>
        <q-space />
        <q-toggle color="accent" v-model="showAnalytics" />
      </div>
    </div>
    <q-separator />
    <div class="row q-my-md items-center" style="width: 50%">
      <q-input
        dense
        rounded
        standout
        v-model="filterStr"
        class="col"
        label="Search"
        bg-color="primary"
        label-color="sub"
        color="white"
        clearable
        input-style="color: white"
      >
        <template v-slot:prepend>
          <q-icon name="search" />
        </template>
      </q-input>
      <div class="row items-center">
        <q-icon
          class="q-mx-md"
          name="mdi-filter-menu"
          size="26px"
          color="sub"
        />
        <q-select
          bg-color="primary"
          dense
          standout
          v-model="currentSorts"
          :options="sortOptions"
        ></q-select>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useGlobalStore } from 'stores/global-store';
import { ref, computed } from 'vue';
const globalStore = useGlobalStore();
const showHome = ref(true);
const showMyConnections = computed({
  get() {
    return globalStore.showMyConnections;
  },
  set(val: boolean) {
    globalStore.showMyConnections = val;
  },
});
const showMyContent = computed({
  get() {
    return globalStore.showMyContent;
  },
  set(val: boolean) {
    globalStore.showMyContent = val;
  },
});
const showMyLibrary = computed({
  get() {
    return globalStore.showMyLibrary;
  },
  set(val: boolean) {
    globalStore.showMyLibrary = val;
  },
});
const showAnalytics = computed({
  get() {
    return globalStore.showAnalytics;
  },
  set(val: boolean) {
    globalStore.showAnalytics = val;
  },
});
const filterStr = ref('');
const sortOptions = ref(['Newest', 'Name']);
const currentSorts = ref('Neweset');
</script>
<style lang="sass" scoped>

.toggles
  font-size: 14px
  .home-group
    color: $drawer-home
  .connections-group
    color: $drawer-connection
  .content-group
    color: $drawer-content
  .library-group
    color: $drawer-library
  .analytics-group
    color: $drawer-analytics
.searcher
  background-color: #101010
</style>
